import { useStores } from '@/store'
import React, { FC } from 'react'
import styled from "styled-components"
interface ITitle {
    name: string
}

const ChartButton = styled.div`
        position:absolute;
        z-index: 1000;
        top:5rem;
        right: 5rem;
        width: 20rem;
        height: 28rem;
        text-align:center;
        display:flex;
        flex-direction: row;
        .button{
            cursor: pointer;
            flex: 1;
            background-color: #01295B;
            border:1px solid #01D4EE;
            width: 6.4rem;
            height:2.8rem;
            text-align: center;
            line-height:2.8rem;
            color:#fff;
        }
        .button:hover,.button:active{
            background-color: #168DAC;
        }
        .left-radius{
            border-bottom-left-radius: 0.5rem;
            border-top-left-radius: 0.5rem;
        }
        .right-radius{
            border-bottom-right-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
        }

  
`

const Content: FC<{}> = function () {
    const store = useStores();
    const changeData=async ()=>{
        const lineChart=await store.sale.setLineChartData(store.header.currentPageType);
        store.header.srtScreenData({...store.header.headerControl.screenData,lineChart})
    }
    return (
        <ChartButton>
            <div className='button left-radius' onClick={changeData}>销售量</div>
            <div className='button' onClick={changeData}>销售额 </div>
            <div className='button right-radius' onClick={changeData}>销售单价</div>
        </ChartButton>
    )
}

export default Content
